import { useReactive, useDom } from "./vue3";

function App() {
  const state = useReactive({
    count: 0,
    name: "张三",
  });
  const add = (num) => {
    state.count += num;
  };
  const minus = (num) => {
    state.count -= num;
  };
  const changeName = (name) => {
    state.name = name;
  };
  return {
    template: ` <h1>{{ count }}</h1>
    <h1>{{ name }}</h1>
      <button onClick="add(2)">+</button>
      <button onClick="minus(1)">-</button>
      <button onClick="changeName('马保国')">改变名字</button>
          `,
    state,
    methods: {
      add,
      minus,
      changeName,
    },
  };
}

useDom(App(), document.querySelector("#app"));
